<template>
  <div class="message">
    <el-container class="el-container">
      <el-container class="el-container1">
        <el-form ref="form" :model="form" label-width="120px" class="el-form">
          <el-form-item label="患者当前诊所">
            <el-col class="form-item">北京中宜和门诊</el-col>
          </el-form-item>
          <el-form-item label="患者姓名" class="el-form-item">
            <el-input v-model="form.name" placeholder="请输入患者姓名" class="form-item"></el-input>
            <img src="@/assets/icons/svg/excl.png" alt="" class="icon" /><span class="reg-text">必填项</span>
          </el-form-item>
          <el-form-item label="患者性别" class="el-form-item">
            <el-radio-group v-model="form.radio" class="form-item">
              <el-radio label="男" class="man"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
            <img src="@/assets/icons/svg/excl.png" alt="" class="icon" /><span class="reg-text">必填项</span>
          </el-form-item>
          <el-form-item label="出生日期" class="el-form-item">
            <el-col>
              <el-date-picker v-model="form.date1" type="date" placeholder="请选择出生日期" style="width: 100%;"></el-date-picker>
              <img src="@/assets/icons/svg/excl.png" alt="" class="icon" /><span class="reg-text">必填项</span>
            </el-col>
          </el-form-item>
          <el-form-item label="患者依从预测" class="el-form-item">
            <el-radio-group v-model="form.resource">
              <el-radio label="良好">良好</el-radio>
              <el-radio label="一般">一般</el-radio>
              <el-radio label="较差">较差</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="家长姓名" class="el-form-item">
            <el-input v-model="form.parentName" placeholder="请输入家长姓名" :span="13"></el-input>
          </el-form-item>
          <el-form-item label="家长关系" class="el-form-item">
            <el-input v-model="form.parentCode" placeholder="请选择" :span="11"></el-input>
          </el-form-item>
          <el-form-item label="家长职业" class="el-form-item">
            <el-input v-model="form.partTypeName" placeholder="请输入家长职业" :span="11"></el-input>
          </el-form-item>
          <el-form-item label="家长联系方式" class="el-form-item">
            <el-input v-model="form.partSystemId" placeholder="请输入家长联系方式" :span="11"></el-input>
          </el-form-item>
          <el-form-item label="家长正畸史" class="el-form-item">
            <el-input v-model="form.partTypeId" placeholder="请输入家长正畸史" :span="11"></el-input>
          </el-form-item>
        </el-form>
      </el-container>
      <el-aside width="300px" class="el-side">
        <el-row>
          <img src="@/assets/icons/svg/heaPortrait.png" alt="" class="headPortrait" />
        </el-row>
        <el-row>
          <el-button round class="btn">上传头像</el-button>
        </el-row>
        <el-row>
          <p>推荐1:1方形图，JPG/PNG格式，5M以内</p>
        </el-row>
      </el-aside>
    </el-container>
    <!--    <el-col class="bot-bar">-->
    <!--      <slot></slot>-->
    <!--    </el-col>-->
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      form: {
        name: '',
        radio: '男',
        date1: '',
        resource: '',
        resource1: '',
        moustache: '',
        pomum: '',
        parentName: '',
        parentCode: '',
        partTypeName: '',
        partSystemId: '',
        partTypeId: ''
      },
      next: ['暂停']
    };
  }
};
</script>

<style>
.message{
  padding: 0px 20px 10px;
  position: relative;
  font-size: 14px;
  font-weight: 400;
}
.message .el-form{
  width: 100%;
  margin-top: 50px;
}
.message .icon{
  height: 18px;
  width: 18px;
  margin:0 10px 0 20px;
  vertical-align: middle;
}
.message .reg-text{
  line-height: 26px;
  color: #EA5F5F;
  vertical-align: middle;
}
.message .el-form-item__label{
  color: #999999;
  font-size: 16px;
  font-weight: normal;
}
.message .el-radio__label{
  font-weight: 400!important;
  line-height: 26px!important;
  color: #707070!important;
  vertical-align: middle;
}
.message .el-radio-group{
  width: 500px;
}
.message .man{
  margin-right: 52px;
}
.message .el-input__inner{
  display: inline-block;
  width: 500px;
  height: 42px;
  border-radius: 6px;
  background: #F2F2F2;
  border: 1px solid #E6E6E6;
}
.message .form-item{
  display: inline-block!important;
  width: 500px!important;
}
.message .el-date-editor{
  display: inline-block!important;
  width: 500px!important;
}
.message .el-input__prefix{
  /*left: 5px!important;*/
  right: 17px!important;
}
.message .el-aside{
  background: #ffffff;
}
.message .headPortrait{
  height: 160px;
  width: 160px;
  margin-top: 50px;
}
.message .btn{
  width: 120px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #508FCC;
  font-size: 18px;
  color: #508FCC;
}
.message .el-side div{
  text-align: center;
}
.message .el-side p{
  line-height: 22px;
  color: #666666;
  font-size: 12px;
}
.message .bot-bar{
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>

